<template>
  <div style="width:100%;">
    <div ref="chartsPro" class="echart"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    visituserbyarea:Array,
    title:String
  },
  data() {
    return {
      areaValue:[],
    };
  },

  methods: {
    drawLine(n) {
      // 基于准备好的dom，初始化echarts实例
      //console.log('222222222222',n)
      let dataList=[];
      for(let i=0;i<n.length;i++){
        this.areaValue.unshift(n[i].value)
          dataList.unshift({
            name:n[i].area_name
          })
      }
        if(!n[0].area_name){
          this.areaValue=[0,0,0,0,0,0]
        }
      let myChart = this.$echarts.init(this.$refs.chartsPro);
      // 绘制图表
      let option = {
        // title: {
        //   text: "雷达图",
        //   textStyle: {
        //     color: "rgba(221,221,221,1)", //标题颜色
        //     fontSize: 14,
        //     lineHeight: 20,
        //   },
        //   // 标题的位置，此时放在图的底边
        //   left: "center",
        //   top: "bottom",
        // },
        // 图表的位置
        grid: {
          position: "center",
        },
        tooltip: {
          //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
          confine: true,
          enterable: true, //鼠标是否可以移动到tooltip区域内
        },
        radar: {
          shape: "circle",
          splitNumber: 3, // 雷达图圈数设置
          name: {
            textStyle: {
              color: "#fff",
              padding: [-10, -12], // 控制文字padding
            },
          },
          // 设置雷达图中间射线的颜色
          axisLine: {
            lineStyle: {
              color: "rgb(29, 106, 187)",
            },
          },
          indicator:dataList,
          //  [
          //   {
          //     name: "通信",
          //     //若将此属性放在radar下，则每条indicator都会显示圈上的数值，放在这儿，只在通信这条indicator上显示
          //     //   axisLabel: {
          //     //     show: true,
          //     //     fontSize: 12,
          //     //     color: "rgb(29, 106, 187)",
          //     //     showMaxLabel: false, //不显示最大值，即外圈不显示数字30
          //     //     showMinLabel: true, //显示最小数字，即中心点显示0
          //     //   },
          //   },
          //   { name: "零售", },
          //   { name: "电力", },
          //   { name: "交通", },
          //   { name: "食品", },
          //   { name: "建筑", },
          //   { name: "银行", },
          //   { name: "汽车", },
          //   { name: "电子工程", },
          // ],
          //雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
          splitArea: {
            show: false,
            areaStyle: {
              color: "rgba(255,0,0,0)", // 图表背景的颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "rgb(27, 103, 184)", // 设置网格的颜色
            },
          },
        },
        series: [
          {
            name: "雷达图", // tooltip中的标题
            type: "radar", //表示是雷达图
            symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
            symbolSize: 6, // 拐点的大小

            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.8,
              },
            },
            data: [
              {
                value: this.areaValue,
                name: this.title,
                // 设置区域边框和区域的颜色
                itemStyle: {
                  normal: {
                    color: "rgb(4, 160, 200)",
                    // lineStyle: {
                    //     show:false,
                    //   color: "rgba(255,225,0,.3)",
                    // },
                  },
                },
                //在拐点处显示数值
                label: {
                  normal: {
                    show: false,
                    // formatter: (params: any) => {
                    //     return params.value
                    // },
                  },
                },
              },
              //   {
              //     value: [5, 20, 19, 11, 22, 17, 8, 19, 16],
              //     name: "",
              //     itemStyle: {
              //       normal: {
              //         color: "rgba(60,135,213,.3)",
              //         lineStyle: {
              //           width: 1,
              //           color: "rgba(60,135,213,.3)",
              //         },
              //       },
              //     },
              //   },
              //   {
              //     value: [7, 18, 19, 13, 22, 17, 8, 25, 9],
              //     name: "",
              //     itemStyle: {
              //       normal: {
              //         color: "rgba(255,74,74,.3)",
              //         lineStyle: {
              //           width: 1,
              //           color: "rgba(255,74,74,.3)",
              //         },
              //       },
              //     },
              //   },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
  computed:{
    getVisituserbyarea(){
      return this.visituserbyarea
    }
  },
  mounted() {
    // this.optionsData(this.companylist)
    this.drawLine(this.getVisituserbyarea);
  },
};
</script>
<style lang="less" scoped>
.echart {
  // width: 100%;
  height: 7vw;
  //   margin-top: 1.1vw;
}
// .publicinput {
//   // z-index: 20;
//   position: absolute;
//   width: 100%;
//   left: 2.693vw;
//   padding-bottom: 0.5vw;
// }
</style>
